<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/footList.css" rel="stylesheet">

</head>
<body>
<div class="container-fluid">
    <div class="menu">
        <ul class="list-group">
            <li class="list-group-item list1"><span>推荐</span></li>
            <li class="list-group-item list1"><span>热菜</span></li>
            <li class="list-group-item list1"><span>冷菜冷盘冷盘</span></li>
            <li class="list-group-item list1"><span>汤品煲汤</span></li>
            <li class="list-group-item list1"><span>甜点等</span></li>
            <li class="list-group-item list1"><span>其他</span></li>
        </ul>
    </div>
    <div class="menuRight">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 text-list">
                    <div class="row">
                        <div class="col-xs-6">
                            <p>煎维也纳牛排煎维也纳牛排</p>
                            <p class="p2"><span>￥</span>280</p>
                        </div>
                        <div class="col-xs-6">
                            <div class="rt">
                                <a href="javascript:;" class="btn_sub2"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number2">0</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 text-list">
                    <div class="row">
                        <div class="col-xs-6">
                            <p>煎维也纳牛排</p>
                            <p class="p2"><span>￥</span>280</p>
                        </div>
                        <div class="col-xs-6">
                            <div class="rt">
                                <a href="javascript:;" class="btn_sub2"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number2">0</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 text-list">
                    <div class="row">
                        <div class="col-xs-6">
                            <p>煎维也纳牛排</p>
                            <p class="p2"><span>￥</span>280</p>
                        </div>
                        <div class="col-xs-6">
                            <div class="rt">
                                <a href="javascript:;" class="btn_sub2"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number2">0</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 text-list">
                    <div class="row">
                        <div class="col-xs-6">
                            <p>煎维也纳牛排</p>
                            <p class="p2"><span>￥</span>280</p>
                        </div>
                        <div class="col-xs-6">
                            <div class="rt">
                                <a href="javascript:;" class="btn_sub2"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number2">0</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 text-list">
                    <div class="row">
                        <div class="col-xs-6">
                            <p>煎维也纳牛排</p>
                            <p class="p2"><span>￥</span>280</p>
                        </div>
                        <div class="col-xs-6">
                            <div class="rt">
                                <a href="javascript:;" class="btn_sub2 "><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number2 ">0</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="closing">

    <a data-toggle="modal" href="#modal-menu"><p  class="menu_list">我的餐单:<span class="count">12</span><span style="font-size: 1.2rem;font-weight: 500;">￥1260</span> </p></a>
    <p  class="myMenu">确    认</p>
</div>
<div class="modal" id="modal-menu">  <!--半透明遮罩-->
    <div class="modal-dialog">  <!--宽高、定位-->
        <div class="modal-content"> <!--背景边框阴影-->
            <div class="modal-header">
                <span style="color:#CBA162;">已选菜品</span>
                <span class="rt">全部清空 </span>
            </div>  <!--对话框头-->
            <div class="modal-body">
                <ul class="list-group">
                    <li class="list-group-item list02">
                        <div class="middle">
                            <div>
                                <span>牛排牛排牛排牛排牛排</span>
                            </div>

                            <span class="jiage01">$280</span>

                            <div class="rt">
                                <a href="javascript:;" class="btn_sub"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number">1</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item list02">
                        <div class="middle">
                            <div>
                                <span>牛排</span>
                            </div>

                            <span class="jiage01">$280</span>
                            <div class="rt">
                                <a href="javascript:;" class="btn_sub"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number">1</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item list02">
                        <div class="middle">
                            <div>
                                <span>牛排</span>
                            </div>

                            <span class="jiage01">$280</span>
                            <div class="rt">
                                <a href="javascript:;" class="btn_sub"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number">1</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item list02">
                        <div class="middle">
                            <div>
                                <span>牛排</span>
                            </div>

                            <span class="jiage01">$280</span>
                            <div class="rt">
                                <a href="javascript:;" class="btn_sub"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number">1</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item list02">
                        <div class="middle">
                            <div>
                                <span>牛排</span>
                            </div>

                            <span class="jiage01">$280</span>
                            <div class="rt">
                                <a href="javascript:;" class="btn_sub"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number">1</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>  <!--主体部分-->
            <!--<div class="modal-footer"></div>  &lt;!&ndash;对话框尾&ndash;&gt;-->
        </div>
    </div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>

<script>
    (function(){

        var special = jQuery.event.special,
                uid1 = 'D' + (+new Date()),
                uid2 = 'D' + (+new Date() + 1);

        special.scrollstart = {
            setup: function() {

                var timer,
                        handler =  function(evt) {

                            var _self = this,
                                    _args = arguments;

                            if (timer) {
                                clearTimeout(timer);
                            } else {
                                evt.type = 'scrollstart';
                                jQuery.event.dispatch.apply(_self, _args);
                            }

                            timer = setTimeout( function(){
                                timer = null;
                            }, special.scrollstop.latency);

                        };

                jQuery(this).bind('scroll', handler).data(uid1, handler);

            },
            teardown: function(){
                jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
            }
        };

        special.scrollstop = {
            latency: 300,
            setup: function() {

                var timer,
                        handler = function(evt) {

                            var _self = this,
                                    _args = arguments;

                            if (timer) {
                                clearTimeout(timer);
                            }

                            timer = setTimeout( function(){

                                timer = null;
                                evt.type = 'scrollstop';
                                jQuery.event.dispatch.apply(_self, _args);

                            }, special.scrollstop.latency);

                        };

                jQuery(this).bind('scroll', handler).data(uid2, handler);

            },
            teardown: function() {
                jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
            }
        };

    })();
    (function(){
        jQuery(window).bind('scrollstart', function(){
            // $(".closing").addClass("hidden")
        });

        jQuery(window).bind('scrollstop', function(e){
            // $(".closing").removeClass("hidden")
        });

    })();
</script>
<script>
    $('.btn_sub2').addClass('hidden');
    $('.number2').addClass('hidden');
    $('.main_list').click(function(){

        if($(this).find('.option').children().attr('src')=='img/icon_selected1.png'){
            $(this).find('.option').empty().append('<img src="img/icon_nonSelect2.png" alt=""/>');
            $(this).find('.cover_top').addClass('hidden');
        }else{
            $(this).find('.option').empty().append('<img src="img/icon_selected1.png" alt=""/>');
            $(this).find('.cover_top').removeClass('hidden');
        }
    })
    $('.btn_sub,.btn_sub2').click(function(){
        var a= $(this).next().html();
        if(a>=1){
            $(this).next().html(a-1);
        }else{
            $(this).next().html();
            $(this).addClass('hidden');
            $(this).next().addClass('hidden');
        }

    })
    $('.btn_add').click(function(){
        var a = $(this).prev().html();
        $(this).prev().html(a-0+1);
        $(this).prev().prev().removeClass('hidden');
        $(this).prev().removeClass('hidden');
    })
</script>
</body>
</html>